<template>
<el-popover
style="margin:0 auto"
placement="top-start"
:width="400"
trigger="hover"
>
<template #default>
 <center>微信公众号</center>
 <div style="text-align: center;">扫描下方二维码关注我们的微信公众号，随时随地获取最新资讯</div>
<div style="display:flex;justify-content:space-around">
<div>
 <img src="https://rs.dance365.com/zww_wechat_2021.jpg" alt="">
 <div style="text-align: center;">中舞网</div>
</div>
<div>
 <img src="https://rs.dance365.com/dace365_contact_qrcode_410.png" alt="">
 <div style="text-align: center;">中舞网</div>
</div>
</div>
</template>
<template #reference>
   <svg t="1666145654381" class="icon"  viewBox="0 0 1174 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4713" width="200" height="200"><path d="M331.434667 263.424q0-23.424-14.293333-37.717333t-37.717333-14.293333q-24.576 0-43.434667 14.570667t-18.858667 37.418667q0 22.293333 18.858667 36.864t43.434667 14.570667q23.424 0 37.717333-13.994667t14.293333-37.418667zM756.010667 553.152q0-16-14.570667-28.565333t-37.418667-12.565333q-15.424 0-28.288 12.864t-12.864 28.288q0 16 12.864 28.864t28.288 12.864q22.848 0 37.418667-12.565333t14.570667-29.141333zM621.141333 263.424q0-23.424-13.994667-37.717333t-37.418667-14.293333q-24.576 0-43.434667 14.570667t-18.858667 37.418667q0 22.293333 18.858667 36.864t43.434667 14.570667q23.424 0 37.418667-13.994667t13.994667-37.418667zM984 553.152q0-16-14.848-28.565333t-37.141333-12.565333q-15.424 0-28.288 12.864t-12.864 28.288q0 16 12.864 28.864t28.288 12.864q22.293333 0 37.141333-12.565333t14.848-29.141333zM832 326.293333q-17.706667-2.282667-40-2.282667-96.576 0-177.706667 44.010667t-127.722667 119.146667-46.570667 164.288q0 44.565333 13.141333 86.848-20.010667 1.706667-38.848 1.706667-14.848 0-28.565333-0.853333t-31.424-3.712-25.429333-4.010667-31.146667-5.994667-28.565333-5.994667l-144.576 72.576 41.152-124.565333q-165.717333-116.010667-165.717333-280 0-96.576 55.722667-177.706667t150.848-127.722667 207.722667-46.570667q100.565333 0 189.994667 37.717333t149.717333 104.277333 77.994667 148.864zM1170.282667 646.848q0 66.858667-39.146667 127.722667t-106.005333 110.570667l31.424 103.424-113.706667-62.293333q-85.717333 21.141333-124.565333 21.141333-96.576 0-177.706667-40.277333t-127.722667-109.418667-46.570667-150.848 46.570667-150.848 127.722667-109.418667 177.706667-40.277333q92.010667 0 173.141333 40.277333t130.005333 109.717333 48.853333 150.570667z" p-id="4714"></path></svg>
</template>
</el-popover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<style scoped>
.icon{
    width: 24px;
    height: 26px;
    margin:0  82px;
    fill:#B1B5C1;
   
}
.icon:hover{
    fill:red;
}
img{
    width: 80px;
    height: 80px;
 
}
</style>

